<template>
    <div class="container">
        首页{{ data }}
        <div class="countdown" style="font-size: 18px; margin-top: 60px;">
            <Countdown slot="right" time="2060/06/06 06:06:06" format="{%s}秒-{%m}分-{%h}时-{%d}天"></Countdown>
        </div>
        <div style="margin: 20px;">
            <el-button type="primary">主要按钮</el-button>
            <el-button>默认按钮</el-button>
            <el-button type="primary">确定</el-button>
            <el-button>取消</el-button>
            <el-button type="primary" disabled>主要按钮</el-button>
            <el-button disabled>默认按钮</el-button>
            <el-button type="primary" size="medium">按钮</el-button>
            <el-button type="primary" @click="centerDialogVisible = true">点击加载弹框dialog</el-button>
            <el-button type="primary" @click="openMessageBox">点击加载弹框MessageBox</el-button>
            <el-button type="primary" :loading="true">提交订单中</el-button>
            <el-button type="text">文字按钮</el-button>
            <el-button type="text" disabled>文字按钮</el-button>
            <el-button type="primary" icon="icon-add">添加商品</el-button>
            <el-button icon="icon-add">添加商品</el-button>
            <el-button icon="icon-upload">上传营业执照</el-button>
            <el-button icon="icon-download">下载营业执照</el-button>
        </div>
        <div class="" style="margin: 20px;">
             <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
             <el-link type="primary">主要链接</el-link>
              <el-link type="success">成功链接</el-link>
              <el-link type="warning">警告链接</el-link>
              <el-link type="danger">危险链接</el-link>
              <el-link type="info">信息链接</el-link>
        </div>
        <div style="margin: 20px;">
             <el-radio v-model="radio" label="1">备选项</el-radio>
            <el-radio v-model="radio" label="2">备选项</el-radio>
            <br/>
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
                <el-checkbox label="禁用" disabled></el-checkbox>
                <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
        </div>
        <div style="width: 200px; margin: 20px;"><el-input placeholder="请输入内容"></el-input></div>
        <div rel="分页" style="margin: 10px 20px;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="handlePrevClick"
                @next-click="handleNextClick"
                :current-page="pagination.currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :pager-count="7"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper,slot"
                :total="1000"
            >
             <span class="btn-submit">确定</span>
            </el-pagination>
            <el-pagination
                background
                @current-change="handleCurrentChange2"
                @prev-click="handlePrevClick2"
                @next-click="handleNextClick2"
                :current-page="pagination.currentPage5"
                prev-text="上一页"
                next-text="下一页"
                layout="total,prev,slot,next"
                :total="pagination.pageTotal"
            >
                <span>{{ pagination.currentPage5 }}/{{ pagination.pageTotal }}</span>
            </el-pagination>
            {{ pagination.currentPage5 }}
        </div>
        <div rel="下拉框" style="margin: 10px 20px;">
            <el-select v-model="value" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
        </div>
        <div rel="下拉多选框" style="margin: 10px 20px;">
            <el-cascader
                separator="-"
                v-model="selectedOptions"
                placeholder="选择或搜索分类"
                :options="categoryList||[]"
                filterable
                change-on-select
            ></el-cascader>
        </div>
        <div style="margin:0 20px; text-align: center; font-size:60px;" rel="数字滚动">
            <Countup :endnum="endnumVal" decimals="2" :useEasing="true"></Countup>
        </div>

        <el-dialog title="制卡成功" :visible.sync="centerDialogVisible" top="30vh" width="470px" center append-to-body>
            <div class="my-cont my-icon-success">恭喜你600张卡制作完成</div>
            <!-- <div class="my-cont my-icon-warning">恭喜你600张卡制作完成</div> -->
            <!-- <div class="my-cont my-icon-danger">恭喜你600张卡制作完成</div> -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">继续制卡</el-button>
                <el-button @click="centerDialogVisible = false">查看详情</el-button>
            </span>
        </el-dialog>
        <nullCont text="没有找到相关商品~"></nullCont>
            <form-table
        title="表单表格分页hooks"
        checkedbox-text="选择当前搜索条件下全部商城"
        :table-config="tableConfig"
        :page-config="pageConfig"
        :operation-config="operationConfig"
        :form-config="formConfig"
        >
        <template v-slot:selectTest>
            <el-form-item prop="area" label="活动区域">
                <el-select v-model="formConfig.form.model.area" :multiple="true" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </template>
        <template v-slot:index>
            <el-table-column type="index" :index="indexMethod"></el-table-column>
        </template>
        <template v-slot:address>
            <el-table-column prop="address" align="center" label="地址">
                <template slot-scope="scope">
                    <span style="color: blue;">{{ scope.row.address }}</span>
                </template>
            </el-table-column>
        </template>
        <template v-slot:operate>
            <el-table-column label="操作" align="center" fixed="right" width="500">
                <template slot-scope="scope">
                    <el-button
                        v-if="$permission(['financial_website_export'])"
                        size="small"
                        type="warning"
                        icon="el-icon-edit"
                        @click="edit(scope.row)"
                    >编辑</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-success"
                        @click="start(scope.row)"
                    >启用</el-button>
                    <el-button size="small" @click="tableConfig.tableMethods.toggleSelection([tableConfig.table.data[1], tableConfig.table.data[2]])">切换第2、3行</el-button>
                    <el-button size="small" @click="tableConfig.tableMethods.toggleSelection()">取消选择</el-button>
                </template>
            </el-table-column>
        </template>
    </form-table>
    </div>
</template>
<script type="text/javascript">
import { CountDown } from '@/components/countdown'
import { CountUp } from '@/components/countup'
import nullCont from '_pageCom/nullCont/nullCont'
import FormTable from '@/views/components/ProFormTable'
export default {
    name: 'home',
    data () {
        return {
            endnumVal: '2060',
            data: '---倒计时组件显示---',
            centerDialogVisible: false,
            pagination: {
                currentPage4: 4,
                currentPage5: 1,
                pageTotal: 100
            },
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                },
                {
                    value: '选项3',
                    label: '蚵仔煎'
                },
                {
                    value: '选项4',
                    label: '龙须面'
                },
                {
                    value: '选项5',
                    label: '北京烤鸭'
                }
            ],
            categoryList: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致'
                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                    }, {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                    }]
                }]
            }, {
                value: 'zujian',
                label: '组件',
                children: [{
                    value: 'basic',
                    label: 'Basic',
                    children: [{
                        value: 'layout',
                        label: 'Layout 布局'
                    }, {
                        value: 'color',
                        label: 'Color 色彩'
                    }, {
                        value: 'typography',
                        label: 'Typography 字体'
                    }, {
                        value: 'icon',
                        label: 'Icon 图标'
                    }, {
                        value: 'button',
                        label: 'Button 按钮'
                    }]
                }, {
                    value: 'form',
                    label: 'Form',
                    children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                    }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                    }, {
                        value: 'input',
                        label: 'Input 输入框'
                    }, {
                        value: 'input-number',
                        label: 'InputNumber 计数器'
                    }, {
                        value: 'select',
                        label: 'Select 选择器'
                    }, {
                        value: 'cascader',
                        label: 'Cascader 级联选择器'
                    }, {
                        value: 'switch',
                        label: 'Switch 开关'
                    }, {
                        value: 'slider',
                        label: 'Slider 滑块'
                    }, {
                        value: 'time-picker',
                        label: 'TimePicker 时间选择器'
                    }, {
                        value: 'date-picker',
                        label: 'DatePicker 日期选择器'
                    }, {
                        value: 'datetime-picker',
                        label: 'DateTimePicker 日期时间选择器'
                    }, {
                        value: 'upload',
                        label: 'Upload 上传'
                    }, {
                        value: 'rate',
                        label: 'Rate 评分'
                    }, {
                        value: 'form',
                        label: 'Form 表单'
                    }]
                }, {
                    value: 'data',
                    label: 'Data',
                    children: [{
                        value: 'table',
                        label: 'Table 表格'
                    }, {
                        value: 'tag',
                        label: 'Tag 标签'
                    }, {
                        value: 'progress',
                        label: 'Progress 进度条'
                    }, {
                        value: 'tree',
                        label: 'Tree 树形控件'
                    }, {
                        value: 'pagination',
                        label: 'Pagination 分页'
                    }, {
                        value: 'badge',
                        label: 'Badge 标记'
                    }]
                }, {
                    value: 'notice',
                    label: 'Notice',
                    children: [{
                        value: 'alert',
                        label: 'Alert 警告'
                    }, {
                        value: 'loading',
                        label: 'Loading 加载'
                    }, {
                        value: 'message',
                        label: 'Message 消息提示'
                    }, {
                        value: 'message-box',
                        label: 'MessageBox 弹框'
                    }, {
                        value: 'notification',
                        label: 'Notification 通知'
                    }]
                }, {
                    value: 'navigation',
                    label: 'Navigation',
                    children: [{
                        value: 'menu',
                        label: 'NavMenu 导航菜单'
                    }, {
                        value: 'tabs',
                        label: 'Tabs 标签页'
                    }, {
                        value: 'breadcrumb',
                        label: 'Breadcrumb 面包屑'
                    }, {
                        value: 'dropdown',
                        label: 'Dropdown 下拉菜单'
                    }, {
                        value: 'steps',
                        label: 'Steps 步骤条'
                    }]
                }, {
                    value: 'others',
                    label: 'Others',
                    children: [{
                        value: 'dialog',
                        label: 'Dialog 对话框'
                    }, {
                        value: 'tooltip',
                        label: 'Tooltip 文字提示'
                    }, {
                        value: 'popover',
                        label: 'Popover 弹出框'
                    }, {
                        value: 'card',
                        label: 'Card 卡片'
                    }, {
                        value: 'carousel',
                        label: 'Carousel 走马灯'
                    }, {
                        value: 'collapse',
                        label: 'Collapse 折叠面板'
                    }]
                }]
            }, {
                value: 'ziyuan',
                label: '资源',
                children: [{
                    value: 'axure',
                    label: 'Axure Components'
                }, {
                    value: 'sketch',
                    label: 'Sketch Templates'
                }, {
                    value: 'jiaohu',
                    label: '组件交互文档'
                }]
            }],
            selectedOptions: [],
            value: '',
            radio: '1',
            checkList: ['选中且禁用', '复选框 A'],
            tableConfig: {
                loading: false,
                noDataText: '没有找到相关商城~',
                table: {
                    data: [],
                    'default-sort': { prop: 'date', order: 'descending' }
                },
                columns: [
                    { slot: 'index' },
                    { type: 'selection', align: 'center' },
                    { label: '时间', prop: 'date', sortable: true },
                    { label: '名字', prop: 'name' },
                    { slot: 'address' },
                    { slot: 'operate' } // 操作列
                ],
                tableEvents: {
                    'selection-change': this.handleSelectionChange
                },
                tableMethods: {
                    toggleSelection (rows) {
                        if (rows) {
                            rows.forEach(row => {
                                this.$refs.proTable.toggleRowSelection(row)
                            })
                        } else {
                            this.$refs.proTable.clearSelection()
                        }
                    }
                }
            },
            pageConfig: {
                attr: {
                    'current-page': 1,
                    'total': 0
                },
                event: {
                    'current-change': this.currentChange
                }
            },
            formConfig: {
                form: {
                    inline: true,
                    model: {
                        area: '',
                        name: '',
                        place: '',
                        time: ''
                    }
                },
                formItems: [
                    { slot: 'selectTest' },
                    { prop: 'name', label: '活动名称', innerEl: { elType: 'input', attr: { placeholder: '请输入内容', type: 'input', maxlength: 2 } } },
                    {
                        prop: 'place',
                        label: '活动地区',
                        innerEl: {
                            elType: 'select',
                            options: [
                                { value: '选项1', label: '黄金糕' },
                                { value: '选项2', label: '双皮奶' }
                            ],
                            attr: { multiple: true, placeholder: '请选择' }
                        }
                    },
                    {
                        prop: 'time',
                        label: '时间范围',
                        innerEl: { elType: 'datePicke', attr: { type: 'datetimerange' } }
                    },
                    { innerEl: { elType: 'button', text: '搜索', isReset: true, attr: {} } },
                    { innerEl: { elType: 'button', text: '重置', isReset: true, attr: {} } }
                ]
            },
            // 可定义操作按钮
            operationConfig: {
                position: 'top',
                buttonItems: [{
                    text: '同步WMS',
                    isCtrDisable: true,
                    attr: { type: 'default' },
                    event: { click: this.btnClick }
                }, {
                    text: '导出',
                    isCtrDisable: true,
                    permission: this.$permission(['financial_website_export']),
                    attr: {},
                    event: { click: this.btnClick }
                }]
            },
            multipleSelection: '',
            selectTest: ''
        }
    },
    components: {
        FormTable,
        Countdown: CountDown,
        nullCont,
        Countup: CountUp
    },
    created () {
        this.getTableData()
    },
    methods: {
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`)
        },
        handlePrevClick (val) {
            console.log(`上一页:${val}`)
        },
        handleNextClick (val) {
            console.log(`下一页:${val}`)
        },
        handleCurrentChange2 (val) {
            this.$nextTick(() => {
                this.pagination.currentPage5 = val
            })
            console.log(`当前页00: ${val}`)
        },
        handlePrevClick2 (val) {
            this.$nextTick(() => {
                this.pagination.currentPage5 = val
            })
            console.log(`上一页:${this.currentPage5}`)
        },
        handleNextClick2 (val) {
            this.$nextTick(() => {
                this.pagination.currentPage5 = val
            })
            console.log(`下一页:${this.currentPage5}`)
        },
        openMessageBox () {
            /*  my-icon-danger
                my-icon-warning
                my-icon-success
            */

            /* this.$alert('此操作将永久删除该文件, 是否继续?', '温馨提示', {
                iconClass: 'my-icon-success',
                closeOnClickModal: false,
                callback: action => {
                    if (action === 'confirm') {
                        alert('confirm')
                    }
                    if (action === 'cancel') {
                        alert('cancel')
                    }
                }
            }) */

            this.$confirm('此操作将永久删除该文件, 是否继续?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                iconClass: 'my-icon-danger',
                closeOnClickModal: false
            }).then(() => {
                alert('确定')
            }).catch(() => {
                alert('取消')
            })
        },
        edit (data) {
            console.log(data)
        },
        start (data) {},
        indexMethod (index) {
            return index * 2
        },
        handleSelectionChange (val) {
            console.log(5, val)
            this.multipleSelection = val
        },
        currentChange (index) {
            console.log(index)
        },
        btnClick () {
            console.log(12, this.formConfig.form.model)
        },
        getTableData () {
            this.tableConfig.loading = true
            setTimeout(() => {
                this.tableConfig.table.data = [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
                // this.tableConfig.table.data = []
                this.pageConfig.attr.total = 200
                this.tableConfig.loading = false
                // resolve()
            }, 1000)
            // new Promise((resolve, reject) => {
            // })
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    .el-button {
        margin-bottom: 10px;
    }
    .countdown {
        border: 2px solid #abc;
    }
}
</style>
